<!-- subpkg_consult/room/index.vue -->
<script setup>
  import { ref } from 'vue'
  import { io } from 'socket.io-client'
  import { useUserStore } from '@/stores/user.js'

  // 导入消息组件
  import patientInfo from './components/patient-info.vue'

  // 不具有响应式
  const { token } = useUserStore()

  // 获取地址参数
  const props = defineProps({
    orderId: String,
  })

  // 消息列表
  const messageList = ref([])

  // 建立 socket 连接
  const socket = io('https://consult-api.itheima.net', {
    auth: { token: 'Bearer ' + token },
    query: { orderId: props.orderId },
    transports: ['websocket', 'polling'],
    timeout: 5000,
  })

  // 接收服务器传过来的数据
  socket.on('chatMsgList', ({ code, data }) => {
    if (code !== 10000) return

    // 提取列表数据
    data.forEach(({ items }) => {
      // 追加到消息列表中
      messageList.value.unshift(...items)
    })
  })
</script>

<template>
  <view class="room-page">
    <scroll-view
      refresher-enabled
      refresher-background="#f2f2f2"
      scroll-y
      style="flex: 1; overflow: hidden"
    >
      <view class="message-container">
        <template v-for="message in messageList" :key="message.id">
          <!-- 患者信息（21） -->
          <patient-info
            v-if="message.msgType === 21"
            :info="message.msg.consultRecord"
          />

          <!-- 此处将来填充更多代码... -->
        </template>
      </view>
    </scroll-view>

    <!-- 发送消息 -->
    <view class="message-bar">
      <template v-if="true">
        <uni-easyinput
          disabled
          :clearable="false"
          :input-border="false"
          placeholder-style="font-size: 32rpx; color: #c3c3c5;"
          placeholder="问医生"
        />
        <view class="image-button">
          <uni-icons size="40" color="#979797" type="image"></uni-icons>
        </view>
      </template>
      <button v-else class="uni-button">咨询其它医生</button>
    </view>
  </view>
</template>

<style lang="scss">
  @import './index.scss';
</style>
